<script setup lang="ts">
import { ref } from 'vue';

import { InboxOutlined } from '@ant-design/icons-vue';
import { message, Upload } from 'ant-design-vue';

import { uploadBindFileApi } from '#/api';

const fileList = ref<any>([]);
const visible = defineModel<boolean>('visible', { default: false });
function beforeUpload(file: File) {
  const isXlsx =
    file.type ===
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  if (!isXlsx) {
    message.error('请上传xlsx文件');
    fileList.value = [];
    return Upload.LIST_IGNORE;
  }
  return false;
}
function okFn() {
  // console.log('fileList.value', fileList.value);
  if (fileList.value.length === 0) {
    message.error('请上传xlsx文件');
    return;
  }
  const formData = new FormData();
  formData.append('file', fileList?.value[0]?.originFileObj);
  uploadBindFileApi(formData).then((_res: any) => {
    message.success('上传成功正在后台处理 请稍后刷新页面查看');
    visible.value = false;
  });
}
function dowFileFn() {
  const aTag = document.createElement('a');
  aTag.href =
    'https://wtplug.oss-cn-hangzhou.aliyuncs.com/1688admin/temp/%E5%85%B3%E8%81%94%E8%B4%A7%E6%BA%90%E6%A8%A1%E7%89%88.xlsx';
  aTag.download = '关联资源模版.xlsx';
  aTag.click();

  // window.open(
  //   'https://wtplug.oss-cn-hangzhou.aliyuncs.com/1688admin/temp/%E5%85%B3%E8%81%94%E8%B4%A7%E6%BA%90%E6%A8%A1%E7%89%88.xlsx',
  // );
}
</script>

<template>
  <div>
    <a-modal :visible="visible" @cancel="visible = false" @ok="okFn">
      <template #title>
        <span>上传文件</span>
        <a-button type="link" @click="dowFileFn">下载模版</a-button>
      </template>
      <a-upload-dragger
        v-model:file-list="fileList"
        :before-upload="beforeUpload"
        :max-count="1"
        :multiple="false"
        name="file"
      >
        <p class="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p class="ant-upload-text">单击或将文件拖到此区域以上传</p>
        <p class="ant-upload-hint">请上传xlsx文件</p>
      </a-upload-dragger>
    </a-modal>
  </div>
</template>
